<template>
  <el-drawer size="1200px" title="客户详情" :visible.sync="dialogVisible" @close="handleClose">
    <div style="padding: 0 40px 40px 40px;">
      <div class="info_group">
        <div class="info_section" />
        <div class="info_title">基本信息</div>
      </div>
      <el-row v-loading="loading">
        <el-col :span="8" class="info_content">
          <span style="color: #868d9f">客户编号：</span>
          {{ customInfo.customerNo }}
        </el-col>
        <el-col :span="8" class="info_content">
          <span style="color: #868d9f">客户名称：</span>
          {{ customInfo.customerName }}
        </el-col>
        <el-col :span="8" class="info_content">
          <span style="color: #868d9f">联系人名称：</span>
          {{ customInfo.contacts }}
        </el-col>
        <el-col :span="8" class="info_content">
          <span style="color: #868d9f">手机号：</span>
          {{ customInfo.phoneNum }}
        </el-col>
        <el-col :span="8" class="info_content">
          <span style="color: #868d9f">邮箱：</span>
          {{ customInfo.email }}
        </el-col>
        <el-col :span="8" class="info_content">
          <span style="color: #868d9f">传真：</span>
          {{ customInfo.fax }}
        </el-col>
        <el-col :span="8" class="info_content">
          <span style="color: #868d9f">地址：</span>
          {{ customInfo.address }}
        </el-col>
        <el-col :span="8" class="info_content">
          <span style="color: #868d9f">备注：</span>
          {{ customInfo.remark }}
        </el-col>
      </el-row>
      <div class="info_group">
        <div class="info_section" />
        <div class="info_title">应收应付</div>
      </div>
      <el-row>
        <el-col :span="12">
          <el-statistic
            title="总应收款"
            group-separator=","
            :precision="2"
            :value="customInfo.receivables"
          >
            <template slot="prefix">
              <i class="el-icon-money" style="color: red" />
            </template>
            <template slot="suffix">
              <i class="el-icon-money" style="color: red" />
            </template>
            <template slot="formatter">
              <money-format v-model="customInfo.receivables" />
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="12">
          <el-statistic
            title="总已收款"
            group-separator=","
            :precision="2"
            :value="customInfo.receivedPayment"
          >
            <template slot="prefix">
              <i class="el-icon-money" style="color: red" />
            </template>
            <template slot="suffix">
              <i class="el-icon-money" style="color: red" />
            </template>
            <template slot="formatter">
              <money-format v-model="customInfo.receivedPayment" />
            </template>
          </el-statistic>
        </el-col>
      </el-row>
      <div class="info_group">
        <div class="info_section" />
        <div class="info_title">历史销售订单</div>
      </div>
      <el-row>
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          border
        >
          <el-table-column label="订单编号" prop="orderNo" min-width="100" />
          <el-table-column label="产品名称" prop="productName" min-width="190" />
          <el-table-column label="单价" prop="unitPrice" min-width="100">
            <template slot-scope="scope">
              <money-format v-model="scope.row.unitPrice" />
            </template>
          </el-table-column>
          <el-table-column label="总数量" prop="quantity" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.quantity }}{{ scope.row.unit }}
            </template>
          </el-table-column>
          <el-table-column label="总金额" prop="amount" min-width="120">
            <template slot-scope="scope">
              <money-format v-model="scope.row.amount" />
            </template>
          </el-table-column>
          <el-table-column label="订单状态" prop="orderState" min-width="80">
            <template slot-scope="scope">
              <sale-order-state-tag v-model="scope.row.orderState" />
            </template>
          </el-table-column>
          <el-table-column label="付款状态" prop="paymentState" min-width="100">
            <template slot-scope="scope">
              <payment-state-tag v-model="scope.row.paymentState" />
            </template>
          </el-table-column>
          <el-table-column label="付款金额" prop="paidAmount" min-width="100">
            <template slot-scope="scope">
              <money-format v-model="scope.row.paidAmount" />
            </template>
          </el-table-column>
          <el-table-column label="发货状态" prop="shipmentState" min-width="100">
            <template slot-scope="scope">
              <shipment-state-tag v-model="scope.row.shipmentState" />
            </template>
          </el-table-column>
          <el-table-column label="发货数量" prop="shippedQuantity" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.shippedQuantity }}{{ scope.row.unit }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-sizes="[5, 10, 20, 30, 40]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
  </el-drawer>
</template>

<script>
import { customer_detail } from '@/api/base-data/customer'
import { order_page } from '@/api/sale/order'

/**
 * @author yizuomin
 * @date 2023/5/7 19:05
 **/
export default {
  name: 'DetailModule',
  props: {
    visible: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      loading: false,
      dialogVisible: this.visible,
      customInfo: {},
      tableData: [],
      tableLoading: false,
      page: {
        page: 1,
        size: 5,
        total: 0,
        query: {

        }
      }
    }
  },
  methods: {
    init(id) {
      this.getCustomerInfo(id)
      this.doPage(id)
    },
    getCustomerInfo(id) {
      this.loading = true
      customer_detail(id).then(resp => {
        if (resp.success) {
          this.customInfo = resp.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
    doPage(id) {
      this.tableLoading = true
      this.page.query.customerId = id
      order_page(this.page).then(resp => {
        if (resp.success) {
          this.tableData = resp.data.records
          this.page.total = resp.data.total
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    handleClose() {
      this.$emit('close')
    },
    handleSearch() {
      this.page.page = 1
      this.doPage()
    },
    resetQueryForm() {
      this.$refs.query.resetFields()
      this.doPage()
    },
    // 分页大小
    handleSizeChange(val) {
      this.page.size = val
      this.doPage()
    },
    // 页码
    handleCurrentChange(val) {
      this.page.page = val
      this.doPage()
    }
  }
}
</script>

<style scoped>

</style>
